<template>
  <div :class="['background',this.status[this.num]]">

  </div>
</template>

<script>
export default {
  props:{
    num:{
      type:String,
      default:"1",
      validator:function(value){
        return ["1","2",'3'].indexOf(value) !== -1
      }
    }
  },
  data(){
    return{
      status:{//映射表
        "1":"color1",
        "2":"color2",
        "3":"color3"
      }
    }
  }
}
</script>

<style scoped>
.background
{
  width: 300px;
  height: 200px;
}

.color1
{ 
  background-color: yellow;
}

.color2
{ 
  background-color: blue;
}

.color3
{ 
  background-color: red;
}
</style>
